<template>
    <div>
        <Card>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: left;">
                    <ButtonGroup shape="circle" size="small">
                        <Button @click="addAction">新增</Button>
                        <Button @click="refreshAction">刷新</Button>
                    </ButtonGroup>
                </div>
                <div style="float: right;">
                    <Page :total="totalCount" :current="pageIndex" :page-size="pageSize" @on-change="onChangePage" size="small" show-total show-elevator></Page>
                </div>
            </div>
            <Table :data="tableData" :columns="columns" :loading="loading" size="small" :stripe="stripe"></Table>
        </Card>

        <Modal :title="modalTitle" v-model="modalShow" :mask-closable="false" :closable="false" :footer-hide="true" scrollable class-name="vertical-center-modal">
            <Form :ref="formRef" :model="formData" label-position="right" :rules="formValidateRule" :label-width="100">
                <input v-model="formData.userId" name="userId" type="hidden">
                <FormItem label="登录账号" prop="account">
                    <Input v-model="formData.account" name="account" placeholder="登录账号"></Input>
                </FormItem>
                <FormItem label="登录密码" prop="userPass">
                    <Input v-model="formData.userPass" name="userPass" placeholder="登录密码"></Input>
                </FormItem>
                <FormItem label="用户姓名" prop="userName">
                    <Input v-model="formData.userName" name="userName" placeholder="用户姓名"></Input>
                </FormItem>
                <FormItem label="性别">
                    <RadioGroup v-model="formData.sex">
                        <Radio label="1">男</Radio>
                        <Radio label="0">女</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="邮箱" prop="email">
                    <Input v-model="formData.email" name="email" placeholder="邮箱"></Input>
                </FormItem>
                <FormItem label="用户类型">
                    <RadioGroup v-model="formData.userType">
                        <Radio label="1">普通用户</Radio>
                        <Radio label="0">管理员</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="用户角色">
                    <CheckboxGroup v-model="formData.roleIds">
                        <Checkbox v-for='(item) in roles' v-bind:key="item.roleId" :label="item.roleId"> {{ item.roleName}}</Checkbox>
                    </CheckboxGroup>
                </FormItem>
                <FormItem>
                    <div style="float: right;">
                        <Button style="margin-right: 10px" @click="formCancelHandle">取消</Button>
                        <Button type="primary" @click="formSaveHandle">保存</Button>
                    </div>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
